<template>
	<view class="flex_b p-30" style="flex-wrap: wrap;">
		<block v-if="myloveList.length">
		<view v-for="(item,index) in myloveList" :key="index" class="userItem m-b-20" @click="likeDetali(item)">
			<image :src="$util.img(item.avatar)" mode=""></image>
			<view class="flex_b bomPositionTitle">
				<view class="white">{{item.age}}岁｜{{item.city||''}}</view>
				<view class="infoBox flex_center">
					<image src="../../static/dgex-tantan/info.png" mode=""></image>
				</view>
			</view>
		</view>
		</block>
		<block v-else>
			<noneList></noneList>
		</block>
		
		<view class="bottom-mar"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myloveList:[],
				userInfo:{}
			};
		},
		onLoad() {
			this.myloveListFn()
			this.getUserInfo()
		},
		methods:{
			// 获取用户信息
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/user/userInfo',
					success: res => {
						this.userInfo = res.data
					}
				})
			},
			myloveListFn() {
				this.$api.sendRequest({
					url:'/api/Friends/myloveList',
					data:{
						limit:10,
						page:1
					},success:res=>{
						this.myloveList = res.data.data
					}
				})
			},
			likeDetali(item) {
				this.$util.redirectTo('/otherpages/userDetali/userDetali',{id:item.id})
			}
		}
	}
</script>

<style lang="scss">
	
	.userItem {
		width: 332rpx;
		height: 400rpx;
		border-radius: 20rpx;
		position: relative;
		
		image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
		
		.bomPositionTitle {
			position: absolute;
			bottom: 0;
			right: 0;
			z-index: 99;
			width: 282rpx;
			padding: 25rpx;
			.infoBox {
				width: 64rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 50%;
				image {
					width: 48rpx;
					height: 42rpx;
					background: #FFFFFF;
					text-align: center;
				}
			}
			
		}
	}
	.userItem:after {
		// 遮罩层
		position: absolute;
		bottom: 0;
		left: 0;
		content: "";
		background-image: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));
		// box-shadow:inset 0 0 10px rgba(0,0,0,0.5);
		opacity: 1;
		z-index: 1;
		width: 100%;
		height: 120rpx;
	}
</style>
